<script lang="ts" setup>
/**
 * 用户详情-短租消费-费用调整记录
 */
import { reactive, ref, onActivated, watchEffect, defineAsyncComponent } from 'vue'
import { FormInstance } from 'element-plus'
import { useTable } from '@/hooks/useTable'
import { useRoute } from 'vue-router'
import { queryFeeChangeLog } from '@/api/record'
import { queryFeeChangeLogTabelCol, queryFeeChangeLogRequestData } from '@/api/record/types/record'
import { getToken } from '@/utils/cache/cookies'
import { useActivated } from '@/hooks/useActivated'
import { OperationType, ShortTermAdjustType } from '@/types/enum'
defineOptions({
  name: 'AdjustFeeRecord'
})
const route = useRoute()
const form = reactive<queryFeeChangeLogRequestData>({
  orderId: route.query.orderId ? (route.query.orderId as string) : '',
  operationType: '',
  userId: route.query.userId ? (route.query.userId as string) : '',
  type: ''
})
const operationType = ref<string>('')
const operationTypeOptions = [
  {
    label: '不限',
    value: ''
  },
  {
    label: '退费(骑行费)',
    value: '1+0'
  },
  {
    label: '退费(强制还车费)',
    value: '1+1'
  },
  {
    label: '退费(维修费)',
    value: '1+2'
  },
  {
    label: '退费(拖车费)',
    value: '1+3'
  },
  {
    label: '退费(违规费)',
    value: '1+4'
  },
  {
    label: '收费(骑行费)',
    value: '0+0'
  },
  {
    label: '收费(维修费)',
    value: '0+2'
  },
  {
    label: '收费(拖车费)',
    value: '0+3'
  },
  {
    label: '收费(违规费)',
    value: '0+4'
  }
]
watchEffect(() => {
  if (operationType.value === '') {
    form.type = ''
    form.operationType = ''
  } else {
    form.type = +operationType.value.split('+')[0] as OperationType
    form.operationType = +operationType.value.split('+')[1] as ShortTermAdjustType
  }
})
const formRef = ref<FormInstance | null>(null)
const { pagination, data, loading, handleSizeChange, handleCurrentChange, setCurrentPage, load } =
  useTable<queryFeeChangeLogTabelCol>(queryFeeChangeLog, getToken() ?? '', () => form)

const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}
const reset = () => {
  formRef.value?.resetFields()
  operationType.value = ''
}
const FeeBreakdownInfo = defineAsyncComponent(
  () => import('@/components/popover/FeeBreakdownInfo.vue')
)
const changePayStatusStyle = (payStatus: string) => {
  switch (payStatus) {
    case '已支付':
      return 'color:var(--xy-success-color)'
    case '待支付':
      return 'color:var(--xy-grey-text-color)'
    default:
      break
  }
}
onActivated(() => {
  form.orderId = (route.query.orderId as string) || ''
  form.userId = (route.query.userId as string) || ''
})
/** 处理是否缓存 */
useActivated(
  form,
  { form },
  [
    { key: 'orderId', path: 'form.orderId' },
    { key: 'type', path: 'form.type' },
    { key: 'userId', path: 'form.userId' },
    { key: 'operationType', path: 'form.operationType' }
  ],
  load,
  []
)
</script>

<template>
  <div class="xy-container">
    <el-form :model="form" ref="formRef" inline>
      <el-form-item label="调整类型">
        <el-select v-model="operationType" placeholder="请选择调整类型" style="width: 140px">
          <el-option
            v-for="(type, index) in operationTypeOptions"
            :key="index"
            :label="type.label"
            :value="type.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="orderId" label="行程编号">
        <el-input v-model="form.orderId" placeholder="请输入行程编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFormSearch">查询</el-button>
        <el-button plain @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data" v-loading="loading">
      <el-table-column prop="phone" label="用户手机号" align="center" />
      <el-table-column
        prop="orderId"
        label="行程编号"
        align="center"
        min-width="250"
        show-overflow-tooltip
      />
      <el-table-column prop="totalAmount" label="总费用" align="center">
        <template #default="scope">
          <el-popover
            placement="bottom"
            title="费用明细"
            width="auto"
            trigger="hover"
            v-if="
              JSON.stringify(scope.row.tradeExtensionData) !== '{}' && scope.row.tradeExtensionData
            "
          >
            <template #reference>
              <span class="cursor-pointer" style="color: var(--xy-grey-text-color)">{{
                scope.row.totalAmount
              }}</span>
            </template>
            <template #default>
              <fee-breakdown-info :data="scope.row.tradeExtensionData" />
            </template>
          </el-popover>
          <span style="color: var(--xy-grey-text-color)" v-else>{{ scope.row.rideAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deductionType" label="抵扣方式" align="center" />
      <el-table-column prop="payStatus" label="支付状态" align="center">
        <template #default="scope">
          <el-popover
            placement="bottom"
            title="待付费用明细"
            width="auto"
            trigger="click"
            v-if="
              JSON.stringify(scope.row.waitPayExtensionData) !== '{}' &&
              scope.row.waitPayExtensionData
            "
          >
            <template #reference>
              <span class="cursor-pointer" :style="changePayStatusStyle(scope.row.payStatus)">{{
                scope.row.payStatus
              }}</span>
            </template>
            <template #default>
              <fee-breakdown-info :data="scope.row.waitPayExtensionData" />
            </template>
          </el-popover>
          <span v-else :style="changePayStatusStyle(scope.row.payStatus)">{{
            scope.row.payStatus
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="operationType"
        label="调整类型"
        align="center"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column prop="amount" label="金额" align="center" />
      <el-table-column prop="discountCoupon" label="优惠金额" align="center" />
      <el-table-column prop="reason" label="原因" align="center" />
      <el-table-column
        prop="changeTime"
        label="操作时间"
        min-width="250"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="operator"
        label="操作人"
        min-width="150"
        show-overflow-tooltip
        align="center"
      />
    </el-table>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
